<template>
  <div>
    <NavigationBar title-text="反馈建议" background-color="#ffffff" />
    <Message ref="message" />
    <Loading ref="loading" fullscreen />

    <div class="feedback-container w-full py-20rpx flex-column">
      <div class="px-34rpx mb-10rpx flex-column">
        <span class="mb-20rpx text-26rpx text-hex-111">您的评分（必填）</span>
        <u-rate
          :count="5"
          v-model="feedbackInfo.rate"
          :min-count="1"
          :size="48"
          inactive-icon="star-fill"
          inactive-color="#ddd"
          active-color="#fbb300" />
      </div>
      <div class="px-34rpx mt-30rpx text-26rpx text-hex-111">您的建议（选填）</div>
      <u-field
        v-model="feedbackInfo.content"
        label-width="0"
        :border-bottom="false"
        :clearable="false"
        maxlength="100"
        :field-style="fieldStyle"
        placeholder="请写下您的意见或建议（选填）"
        type="textarea" />
      <div class="w-full px-34rpx mt-40rpx">
        <button class="btn_row w-full mb-40rpx flex items-center flex-nowrap text-30rpx" open-type="contact">
          <view class="btn_title flex flex-shrink-0 items-center text-28rpx text-hex-555">
            <span>紧急问题请点击</span>
            <span class="text-primary">此处</span>
            <span>联系客服</span>
          </view>
        </button>
        <div
          class="w-full h-80rpx flex flex-center bg-primary text-white rounded-lg"
          @click="handleBtnClick">
          <span>提交</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Message from '@/components/message/src/message.vue'
  import {MessageMethod} from '@/components/message'
  import Loading from '@/components/loading/src/loading.vue'
  import {LoadingMethod} from '@/components/loading'
  import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue'
  import {systemApi} from '@/service/api'
  // import {useStudentStore} from '@/store'
  import {gotoPage} from '@/common/utils'

  const message = ref<InstanceType<typeof Message> & MessageMethod>(null)
  const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null)

  const fieldStyle = {
    backgroundColor: '#f6f6f6',
    borderRadius: '30rpx',
    padding: '30rpx',
    minHeight: '200rpx'
  } //文本框样式

  const feedbackInfo = ref({
    rate: 0,
    type: '',
    content: ''
  })

  // 提交按钮点击事件
  const handleBtnClick = useThrottleFn((): void => {
    if (feedbackInfo.value.rate === 0) {
      message.value && message.value.warning({
        text: '请选择评分',
        direction: 'top'
      })
      return
    }
    systemApi.sendFeedback({
      score: feedbackInfo.value.rate,
      remark: feedbackInfo.value.content,
      // studentNum: useStudentStore().studentInfo?.num ?? ''
    }).then(() => {
      message.value && message.value.success({
        text: '反馈成功',
        direction: 'top'
      })
      gotoPage('', 'navigateBack')
    }).catch(() => {
      message.value && message.value.error({
        text: '反馈失败',
        direction: 'top'
      })
    })
  }, 1000, false, true)
</script>

<style scoped lang="scss">
  button {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    line-height: unset;

    &::after {
      border: none;
    }
  }
</style>